<style lang="scss">
.topic-form {
     .opt {
          margin-top: 15px;
          width: 100%;
          display: flex;
          align-items: flex-start;

          .label {
               display: inline-block;
               width: 120px;
               padding-right: 10px;
               text-align: right;
          }

          .el-textarea__inner {
               min-height: 200px !important;
          }
     }
}
</style>
<template>
     <h3>面试题列表</h3>
     <!-- 表单（采集信息） -->
     <div class="topic-form">
          <!-- 选择一级菜单ID -->
          <div class="opt">
               <span class="label">
                    选择主菜单:
               </span>
               <!-- select 下拉选项组件 -->
               <el-select v-model="cid" placeholder="请选择主菜单" size="large" style="width:  calc(100% - 120px)"
                    @change="choonseCategoryFn">
                    <el-option v-for="item in options" :key="item.category_id" :label="item.category_text"
                         :value="item.category_id" />
               </el-select>
          </div>

          <!-- 选择二级菜单ID -->
          <div class="opt">
               <span class="label">
                    选择子菜单:
               </span>
               <!-- select 下拉选项组件 -->
               <el-select v-model="mid" placeholder="请选择子菜单" size="large" style="width:  calc(100% - 120px)"
                    @change="choonseCategoryFn2">
                    <el-option v-for="item in options2" :key="item.menu_id" :label="item.menu_name"
                         :value="item.menu_id" />
               </el-select>
          </div>

          <!-- 题目 -->
          <div class="opt">
               <span class="label">
                    题目:
               </span>
               <!-- input 输入框组件 -->
               <el-input v-model="input" size="large" style="width: calc(100% - 120px)" placeholder="请输入题目" />
          </div>


          <!-- 答案解析 -->
          <div class="opt">
               <span class="label">
                    答案解析:
               </span>
               <!-- input 文本输入域组件 -->
               <el-input v-model="input2" type="textarea" style="width:  calc(100% - 120px); min-height: 200px;"
                    placeholder="答案解析" />
          </div>


          <div class="opt">
               <!-- 按钮组件 -->
               <el-button @click="addInterviewTopicFn" type="primary">发布题目</el-button>
          </div>
     </div>

     <!-- 表格（显示信息） -->
     <div class="menu-list" style="margin-top: 15px;">
          <el-table :data="tableData" stripe style="width: 100%">
               <!-- <el-table-column prop="index" label="序号" width="70" /> -->
               <!-- <el-table-column prop="category_id" label="主菜单ID" width="180" /> -->
               <el-table-column prop="menu_id" label="子菜单ID" width="120" />
               <el-table-column prop="menu_name" label="子菜单名称" width="180" />
               <el-table-column prop="topic_question" label="面试题" width="280" />

               <!-- <el-table-column prop="topic_answer_val" label="面试题答案分析"  width="280" style="cursor: pointer;" /> -->

               <el-table-column label="面试题答案分析">
                    <template #default="scope">
                       <span>{{ scope.row.topic_answer_val}}</span>
                    </template>
               </el-table-column>

               <el-table-column label="操作">
                    <template #default="scope">
                         <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                              删除
                         </el-button>
                         <el-button size="small" type="primary"  @click="lookDetail(scope.row.topic_question, scope.row.topic_answer)">
                              查看详情
                         </el-button>
                    </template>
               </el-table-column>
          </el-table>


          <!-- 对话框弹窗 -->
          <el-dialog v-model="centerDialogVisible" title="Warning" width="1000" center>
               <div>
                    <!-- 渲染的内容 -->
                     <h4 style="padding: 10px 0;">{{ question }}</h4>
                     <p style="line-height: 1.75;">{{ answer }}</p>
               </div>
               <template #footer>
                    <div class="dialog-footer">
                         <el-button @click="centerDialogVisible = false">关闭</el-button>
                         <el-button type="primary" @click="centerDialogVisible = false">
                              确定
                         </el-button>
                    </div>
               </template>
          </el-dialog>

     </div>


</template>

<script setup lang="ts">
import { ref } from "vue";
import { listInterviewCategory, listInterviewMenu, addInterviewTopic, listInterviewTopic, removeInterviewTopic, listInterviewTopicAll } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus';

const centerDialogVisible = ref(false)


// 示例：
// 对未知属性和值进行类型定义
interface OItem {
     [key: string]: any;
}
// 定义响应式变量
let cid = ref("") //主菜单ID
let mid = ref("") // 子菜单ID
let input = ref("") //题目
let input2 = ref("")// 答案解析
let options = ref<any>([])
let options2 = ref<any>([]) //子菜单列表
let text = ref('')// 主菜单名称
let name2 = ref('')// 子菜单名称

let tableData = ref([])
let question = ref("");
let answer = ref("");

// 用户点击题目查看详情
const lookDetail = (q:string, a:string) => {
     question.value = q;
     answer.value = a;
     centerDialogVisible.value = true;
}



// 选择主菜单下拉选项
const choonseCategoryFn = (value: string) => {
     // console.log(value)
     let arr = options.value.filter((item: OItem) => {
          return item.category_id == value
     })
     if (arr) {
          text.value = arr[0].category_text;
     }
     //  当一级菜单做出选择，二级菜单跟随变化
     listInterviewMenuFn(value);

}

// 选择子菜单下拉选项
const choonseCategoryFn2 = (value: string) => {
     //  console.log(value)
     let arr = options2.value.filter((item: OItem) => {
          return item.menu_id == value
     })
     if (arr) {
          name2.value = arr[0].menu_name;
     }
}

// 获取主菜单列表
const listInterviewCategoryFn = async () => {
     await listInterviewCategory()
          .then(
               content => {
                    //  console.log("1.0",content);
                    let { code, result } = content;
                    if (code == 200) {
                         // 整合数据
                         let arr = result.map((item: OItem, index: number) => {
                              let obj: OItem = {};
                              obj.category_id = item.category_id;
                              obj.index = index;
                              obj.category_text = item.category_text;
                              return obj;
                         })
                         // 赋值
                         options.value = arr;
                    }
               }
          )
}

// 获取子菜单列表
const listInterviewMenuFn = async (category_id: string | undefined) => {
     await listInterviewMenu({ category_id })
          .then(
               content => {
                    // console.log("3.0",content)
                    let { code, result } = content;
                    if (code == 200) {
                         options2.value = result;
                    }
               }
          )
}

// 发布题目
const addInterviewTopicFn = async () => {
     // category_id,menu_id,menu_name, topic_question,topic_answer 
     let category_id = cid.value;
     let menu_id = mid.value;
     let menu_name = name2.value;
     let topic_question = input.value;
     let topic_answer = input2.value;
     // console.log(category_id, menu_id, menu_name, topic_question, topic_answer);// 
     if (category_id && menu_id && menu_name && topic_question && topic_answer) {
          // 调用添加题目的方法
          await addInterviewTopic({ category_id, menu_id, menu_name, topic_question, topic_answer })
               .then(
                    content => {
                         // console.log("2.0", content)
                         let { code, msg } = content;
                         if (code == 200) {
                              // 提示反馈
                              ElMessage.success(msg);

                              listInterviewTopicFn();// 获取题目列表
                         }
                         else {
                              ElMessage.error(msg);
                         }
                    }
               )
     }
     else {
          ElMessage.error("表单不能缺少参数")
     }
}

// 获取题目列表
const listInterviewTopicFn = async () => {
     await listInterviewTopicAll()
          .then(
               content => {
                    // console.log("3.0",content)
                    let { code, result } = content;
                    if (code == 200) {
                         let arr = result.map((item: OItem) => {
                              // 整合数据
                              if (item.topic_answer.length > 12) {
                                   item.topic_answer_val = item.topic_answer.slice(0, 30) + "..."
                              }
                              return item;
                         })
                         tableData.value = arr;
                    }
               }
          )
}

// 点击删除题目
const handleDelete = (index: number, row: any) => {
     // console.log(index, row)
     // console.log(index, row)
     // 获取当前点击的选项
     let { topic_id } = row;
     ElMessageBox.confirm(
          `是否删除这个题目?`,
          '提示',
          {
               distinguishCancelAndClose: true,
               confirmButtonText: '确定',
               cancelButtonText: '取消',
          }
     )
          .then(async () => {
               // console.log("点击确定")
               // 删除题目
               await removeInterviewTopic({ topic_id })
                    .then(
                         content => {
                              let { code, msg } = content;
                              if (code != 200) {
                                   ElMessage.error(msg)
                              }
                         }
                    )
               // 删除程序中数组对应的数据
               tableData.value.splice(index, 1);
          })
          .catch(() => {
               // console.log("点击取消")
          })
}

// 初始化
listInterviewCategoryFn();//主菜单列表
listInterviewTopicFn();// 获取题目列表


</script>